<script setup>
import DeviceStatus from './components/DeviceStatus.vue'
import { goTo } from '../../hooks/useNavigator'
import Money from './components/Money.vue'
import NavBar from '../components/NavBar.vue'
import { ref, reactive } from 'vue'

import { onShow, onReachBottom } from "@dcloudio/uni-app";
import { request } from '../../common/http'
import { ApiUrl } from '../../common/ApiUrl'
import { Toast } from "@/utils";

const state = reactive({
	navHeight: 0,
	/* 当前登录的用户信息 */
	userInfo: {},
	/* 统计数量 */
	dayMonthStatistical: {},
	/* 补货设备数量 */
	replenishmentEquipmentInfo: {},
	/* 用户月度总营业额和投币统计 */
	countTotalTurnover: {},
})

onShow(() => {
	const user = JSON.parse(uni.getStorageSync("user"));
	if (user) {
		state.userInfo = user.userInfo;
		/* 获取用户月度总营业额和投币统计 */
		getCountTotalTurnover();
	}
	/* 获取统计数量 */
	getDayMonthStatisticalData();
	/* 获取补货设备数量 */
	getReplenishmentQquipmentInfo();
})

/* 获取统计数量 */
const getDayMonthStatisticalData = () => {
	request({
		url: ApiUrl.StatisticalDayMonth,
	}).then((res) => {
		if (res.status == 0) {
			state.dayMonthStatistical = res.data;
		} else {
			Toast(res.msg);
		}
	})
	
}

/* 获取补货设备数量 */
const getReplenishmentQquipmentInfo = () => {
	request({
		url: ApiUrl.getReplenishmentEquipmentInfo,
		method: "post",
	}).then((res) => {
		if (res.status == 0) {
			state.replenishmentEquipmentInfo = res.data;
		} else {
			Toast(res.msg);
		}
		console.log(res)
	})
}

/* 获取用户月度总营业额和投币统计 */
const getCountTotalTurnover = () => {
	request({
		url: ApiUrl.getCountTotalTurnover,
		method: "post",
		data: {
			'userId': state.userInfo.id
		}
	}).then((res) => {
		if (res.code === 200) {
			state.countTotalTurnover = res.data;
		} else {
			Toast(res.message);
		}
	})
}

</script>

<template>
  <NavBar
		v-model:navHeight="state.navHeight"
		:hideBack="true"
		title="新零售智能管理平台"
		bg="linear-gradient( 117deg, #FF7D70 0%, #FF4638 100%)"
		color="#fff" >
	</NavBar>
  <view class="home">
		<image class="bg" src="/static/image/home/bg.png" mode="widthFix" />
    <Money :data="state.dayMonthStatistical" :info="state.countTotalTurnover"/>
    <DeviceStatus :data='state.dayMonthStatistical' :info="state.replenishmentEquipmentInfo" />
    <view class="container">
      <view class="card">
        <view class="inner">
          <view class="item" @click="goTo('/pages/index/DeviceManager/index')">
            <image mode="widthFix" src="/static/image/home/icon/devices.png" />
            <view>设备管理</view>
          </view>
          <view class="item" @click="goTo('/pages/index/OrderHistory/index')">
            <image mode="widthFix" src="/static/image/home/icon/order.png" />
            <view>订单查询</view>
          </view>
          <view class="item" @click="goTo('/pages/index/Statistics/index')">
            <image mode="widthFix" src="/static/image/home/icon/financial.png" />
            <view>经营统计</view>
          </view>
          <view class="item" @click="goTo('/pages/index/Member/index')">
            <image mode="widthFix" src="/static/image/home/icon/member.png" />
            <view>会员管理</view>
          </view>
          <view class="item" @click="goTo('/pages/index/FieldManager/index')">
            <image mode="widthFix" src="/static/image/home/icon/place.png" />
            <view>场地管理</view>
          </view>
          <view class="item" @click="goTo('/pages/index/UserReport/index')">
            <image mode="widthFix" src="/static/image/home/icon/report.png" />
            <view>客户投诉</view>
          </view>
          <view class="item" @click="goTo('/pages/index/BlackList/index')">
            <image mode="widthFix" src="/static/image/home/icon/blacklist.png" />
            <view>黑名单</view>
          </view>
        </view>
      </view>
      <view class="card">
        <view class="title">售货设备</view>
        <view class="inner">
          <view class="item" @click="goTo('/pages/index/ProductManager/index')">
            <image mode="widthFix" src="/static/image/home/icon/production.png" />
            <view>商品管理</view>
          </view>
          <view class="item" @click="goTo('/pages/index/LackDevices/index')">
            <image mode="widthFix" src="/static/image/home/icon/lack.png" />
            <view>缺货设备</view>
          </view>
          <view class="item" @click="goTo('/pages/index/BillStatistics/index')">
            <image mode="widthFix" src="/static/image/home/icon/note.png" />
            <view>账单统计</view>
          </view>
          <view class="item" @click="goTo('/pages/index/shipmentStatistics/index')">
            <image mode="widthFix" src="/static/image/home/icon/sold.png" />
            <view>出货统计</view>
          </view>
          <view class="item" @click="goTo('/pages/index/PackageCode/index')">
            <image mode="widthFix" src="/static/image/home/icon/withdraw.png" />
            <view>提货码</view>
          </view>
        </view>
      </view>
      <view class="card">
        <view class="title">共享设备</view>
        <view class="inner">
          <view class="item" @click="goTo('/pages/index/Combo/index')">
            <image mode="widthFix" src="/static/image/home/icon/promote.png" />
            <view>套餐设置</view>
          </view>
          <view class="item" @click="goTo('/pages/index/ProductManager/index')">
            <image mode="widthFix" src="/static/image/home/icon/production_share.png" />
            <view>商品管理</view>
          </view>
          <view class="item" @click="goTo('/pages/index/Coin/index')">
            <image mode="widthFix" src="/static/image/home/icon/coin.png" />
            <view>出币投币</view>
          </view>
          <view class="item" @click="goTo('/pages/index/RemoteStart/index')">
            <image mode="widthFix" src="/static/image/home/icon/remote_start.png" />
            <view>远程启动</view>
          </view>
        </view>
      </view>
      <view class="card">
        <view class="title">营销管理</view>
        <view class="activities">
          <view class="item" @click="goTo('/pages/promotion/Reduction/index')">
            <image mode="widthFix" src="/static/image/home/xfmj.png"/>
          </view>
          <view class="item" @click="goTo('/pages/promotion/Coupon/index')">
            <image mode="widthFix" src="/static/image/home/yhq.png"/>
          </view>
          <view class="item" @click="goTo('/pages/promotion/LuckyDraw/index')">
            <image mode="widthFix" src="/static/image/home/cjhd.png"/>
          </view>
          <view class="item" @click="goTo('/pages/promotion/Adv/index')">
            <image mode="widthFix" src="/static/image/home/gggl.png"/>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.home {
	position: absolute;
  background: #F7F7F7;
	top: calc(v-bind('state.navHeight') * 1px);
	.bg {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
	}
}
.container {
  padding: 0 32rpx;
}
.card {
  background: #fff;
  border-radius: 24rpx 24rpx 24rpx 24rpx;
  padding: 36rpx;
  &:not(:last-child) {
    margin-bottom: 24rpx;
  }
  .inner {
    display: flex;
    flex-wrap: wrap;
    gap: 32rpx 70rpx;
    width: 100%;
    .item {
      width: 100rpx;
      font-size: 24rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      image {
        width: 72rpx;
        margin-bottom: 12rpx;
      }
    }
  }
  .title {
    font-size: 30rpx;
    color: #333333;
    line-height: 35rpx;
    margin-bottom: 18rpx;
  }
  .activities {
    display: flex;
    flex-wrap: wrap;
    gap: 16rpx;
    .item {
      width: calc(49% - 8rpx);
    }
    image {
      width: 100%;
    }
  }
}
</style>
